<script setup lang="ts">
import CdlSearch from "@/components/search";
import CdlTable from "@/components/table";
import {Mode, Query, State} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive} from "vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {Insure} from "@/interfaces/views/vehicle/insure";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";

const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/insurance-policy",
}
const state = reactive<State<Query<Insure>, Insure>>({
  queryForm: {
    status: 2
  },
  dataList: []
})
const {query} = useTablePagingTemplate(request, state)

const searTree: FormTree<Insure> = [
    [
      {label: "车牌号", component: "input"},
      {label: "保险有效期区间", component: "datePicker", type: "daterange", labelWidth: 120}
    ]
]
const tree: TableTree<Insure> = {
  colRule: [
    {ti: "关联车辆", prop: "licensePlate"},
    {ti: "保险公司", prop: "insuranceCompany"},
    {ti: "保单号", prop: "insurancePolicyNum"},
    {ti: "保费金额", prop: "fee"},
    {ti: "投保日期", prop: "effectiveTime", width: 170},
    {ti: "到期日期", prop: "expTime", width: 170},
    {ti: "是否结算", prop: "isClear", dict: "overall_yes_or_no"},
    {ti: "经办人", prop: "handler"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: jumpInsureDetail, auth: "vehicle:insure:info"},
  ]
}

/**
 *  跳转详情
 */
function jumpInsureDetail(id: string){
  router.push({
    path: "/vehicleManage/insure/insureDetails",
    query: {
      id: id
    }
  })
}
/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){

  switch (mode){
    case "add":
      break
  }

}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="warning" v-auth="'vehicle:insure:export'">导出</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList" :control-width="200"></CdlTable>
  </el-card>
</template>
